<template>
  <div style="margin-left: 23%;border-radius: 5px;width: 98%;height: 700px;background: white;margin-top: 10px;">
    <div class="handle-box" style="margin-left: -40px; padding: 20px">
      <el-button class="modify" @click="handleInsert"><Plus style="width: 1em; height: 1em; margin-right: 8px" />添加</el-button>
      <el-button class="modify" @click="handleDelete(cid)"><Delete style="width: 1em; height: 1em; margin-right: 8px" /> 删除</el-button>
      <el-input style="margin-left: 7%" v-model="selectWord" size="medium" placeholder="影厅" class="handle-input"></el-input>
      <el-button class="modify" @click="selectCinema">点击查询</el-button>
    </div>
    <el-table size="mini" style="margin-left: 2%; margin-top: 15px; width: 100%; height: 500px" :data="data"  @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="180%"></el-table-column>
      <el-table-column prop="cname" label="影厅名" width="200%"></el-table-column>
      <el-table-column prop="crow" label="行数" width="200%"></el-table-column>
      <el-table-column prop="ccolumn" label="列数" width="200%"></el-table-column>
      <el-table-column label="操作" width="200%">
        <template #default="scope">
          <el-button class="modify" @click="handleEdit(scope.row)"><Edit style="width: 1em; height: 1em; margin-right: 8px" /> 编辑</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination">
      <el-pagination
        background
        layout="total,prev,pager,next"
        :page-size="pageSize"
        :total="tableData.length"
        @current-change="handleCurrentChange"
      >
      </el-pagination>
    </div>
    <el-dialog title="添加影厅" v-model="addDialogVisible" width="400px" center>
      <el-form :model="addForm" label-width="80px">
        <el-form-item prop="cname" label="影厅" size="mini">
          <el-input v-model="addForm.cname" placeholder="影厅"></el-input>
        </el-form-item>
        <el-form-item prop="crow" label="行数" size="mini">
          <el-input v-model="addForm.crow" label="行数" size="mini" placeholder="行数"></el-input>
        </el-form-item>
        <el-form-item prop="ccolumn" label="列数" size="mini">
          <el-input v-model="addForm.ccolumn" placeholder="列数"></el-input>
        </el-form-item>
      </el-form>
      <span>
        <el-button size="mini" @click="addDialogVisible = false">取消</el-button>
        <el-button size="mini" @click="insertCinema">确定</el-button>
      </span>
    </el-dialog>
    <el-dialog title="编辑影厅" v-model="editDialogVisible" width="400px" center>
      <el-form :model="editForm" label-width="80px">
        <el-form-item prop="cname" label="影厅" size="mini">
          <el-input v-model="editForm.cname" placeholder="影厅"></el-input>
        </el-form-item>
        <el-form-item prop="crow" label="行数" size="mini">
          <el-input v-model="editForm.crow" placeholder="行数"></el-input>
        </el-form-item>
        <el-form-item prop="ccolumn" label="列数" size="mini">
          <el-input v-model="editForm.ccolumn" placeholder="列数"></el-input>
        </el-form-item>
      </el-form>
      <span>
        <el-button size="mini" @click="editDialogVisible = false">取消</el-button>
        <el-button size="mini" @click="editCinema">确定</el-button>
      </span>
    </el-dialog>
    <el-dialog title="删除影厅" v-model="delDialogVisible" width="300px" center>
      <div align="center">删除不可恢复，是否确定删除？</div>
      <span>
        <el-button size="mini" @click="delDialogVisible = false">取消</el-button>
        <el-button size="mini" @click="deleteCinema">确定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script setup>
import { ref, reactive, onMounted, computed } from 'vue'
import axios from 'axios'
import { ElMessage } from 'element-plus'
const cid = ref('')
const tableData = ref([])
const tempData = ref([])
const selectWord = ref('')
function selectCinema() {
  if (selectWord.value === '') {
    tableData.value = tempData.value
  } else {
    tableData.value = []
    for (const item of tempData.value) {
      if (item.cname.includes(selectWord.value)) {
        tableData.value.push(item)
      }
    }
  }
}
const currentPage = ref(1)
function handleCurrentChange(val) {
  currentPage.value = val
}
const pageSize = ref(5)
const data = computed(() => {
  return tableData.value.slice((currentPage.value - 1) * pageSize.value)
})
function getCinemaData() {
  axios.get('/api/cinema/getAllCinema').then((res) => {
    tableData.value = res.data
    tempData.value = res.data
  })
}
const idx = ref('')
function deleteRow() {
  axios
    .get('/api/cinema/deleteCinema/' + idx.value)
    .then((res) => {
      console.log(res)
      ElMessage.success('删除影厅成功！')
      getCinemaData()
    })
    .catch(() => {
      ElMessage.warning('删除影厅失败！')
    })
}
const multipleSelection = ref('')
function handleSelectionChange(val) {
  multipleSelection.value = val
}
const addDialogVisible = ref(false)
const editDialogVisible = ref(false)
const delDialogVisible = ref(false)

const addForm = reactive({
  cid: null,
  cname: '',
  crow: '',
  ccolumn: ''
})
const editForm = reactive({
  cid: '',
  cname: '',
  crow: '',
  ccolumn: ''
})
function handleInsert() {
  addDialogVisible.value = true
}
function insertCinema() {
  addForm.crow = parseInt(addForm.crow)
  addForm.ccolumn = parseInt(addForm.ccolumn)
  axios
    .post('/api/cinema/addCinema', addForm)
    .then((res) => {
      console.log(res)
      getCinemaData()
      ElMessage.success('添加影厅成功！')
    })
    .catch(() => {
      ElMessage.warning('添加影厅失败！')
    })
  addDialogVisible.value = false
}
function handleEdit(row) {
  editDialogVisible.value = true
  editForm.cid = row.cid
  editForm.cname = row.cname
  editForm.crow = row.crow
  editForm.ccolumn = row.ccolumn
}
function editCinema() {
  axios
    .post('/api/cinema/updateCinema', editForm)
    .then((res) => {
      console.log(res)
      getCinemaData()
      ElMessage.success('修改影厅成功！')
    })
    .catch(() => {
      ElMessage.warning('修改影厅失败！')
    })
  editDialogVisible.value = false
}
function handleDelete(id) {
  idx.value = id
  delDialogVisible.value = true
}
function deleteCinema() {
  for (const item of multipleSelection.value) {
    handleDelete(item.cid)
    deleteRow()
  }
  multipleSelection.value = []
  delDialogVisible.value = false
}
onMounted(() => {
  getCinemaData()
})
</script>
<style lang="scss" scoped>
@import '@/assets/scss/adminPhone/phoneAdminAuditorium.scss';
</style>
